<template>
  <div class="collection" :class="modell">
    <van-nav-bar left-arrow title="我的收藏" @click-left="onClickLeft" />
    <van-swipe-cell v-for="(e,i) in collectionData" :key="i">
      <div class="tempcontent" @click="goStoryContent(e.id)">
        <div class="title">{{e.title}}</div>
        <img class="imges" :src="e.images[0]" alt width="65px" height="65px" />
      </div>
      <template #right>
        <van-button
          @click="removeCollection(e.id)"
          square
          type="danger"
          class="delete-button"
          text="取消收藏"
        />
      </template>
    </van-swipe-cell>
    <div class="tips" v-if="collection.length==0">还没有收藏</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collection: [],
      collectionData: [],
      bol: false,
      modell: ""
    };
  },
  created() {
    this.modell = localStorage.getItem("modell");
    this.collection = JSON.parse(localStorage.getItem("usercollection")) || [];
    for (let i = 0; i < this.collection.length; i++) {
      this.getCollection(this.collection[i]);
    }
    this.$nextTick(() => {
      this.bol = true;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getCollection(id) {
      this.axios({
        methods: "get",
        url: "story/" + id
      })
        .then(result => {
          this.collectionData.push(result.data.story);
        })
        .catch(err => {
          console.log(err);
        });
    },
    removeCollection(id) {
      console.log(this.collection);
      for (let i = 0; i < this.collection.length; i++) {
        if (this.collection[i] == id) {
          this.collection.splice(i, 1);
          this.$set(this.collection);
          localStorage.setItem(
            "usercollection",
            JSON.stringify(this.collection)
          );
          location.reload();
        }
      }
    },
    goStoryContent(id) {
      this.$router.push({
        name: "Story",
        params: {
          storyid: id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.collection {
  height: 100vh;
}
/deep/.van-nav-bar .van-icon {
  color: #000;
}
/deep/.van-nav-bar__arrow {
  font-size: 25px;
}
.tips {
  margin-top: 40vh;
  text-align: center;
}
.tempcontent {
  border-bottom: 1px solid #eee;
  background: rgb(255, 255, 255);
  display: flex;
  padding: 5px 5px;
  align-items: center;
  .title {
    padding: 0 15px;
    font-size: 15px;
  }
  .imges {
    margin-left: auto;
  }
}
.delete-button {
  width: 80px;
  font-size: 12px;
  height: 100%;
}
.dark {
  background: #000;
  .van-nav-bar {
    background: rgb(26, 26, 26);
  }
  /deep/.van-nav-bar__title {
    color: #eee;
  }
  /deep/.van-nav-bar .van-icon {
    color: #eee;
  }
  .tempcontent {
    background: rgb(26, 26, 26);
    color: #eee;
  }
  .tips{
      color: #eee;
  }
}
</style>